<template>
  <div>
      
      <div class="content">
          <el-form :inline="true" :model="formInline" class="demo-form-inline" >

              <el-form-item label="用户名" class="form-header">
                  <el-select
                    v-model="form.userId"
                    placeholder="请选择"
                    class="slect"
                    @change="getChange"
                  >
                    <el-option
                      v-for="item in userList"
                      :key="item.userId"
                      :label="item.userName"
                      :value="item.userId"
                    ></el-option>
                  </el-select>
                </el-form-item>

              <el-form-item label="用户类型" class="form-header">
                  <el-select v-model="form.capitalFlow" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.label"
                        :label="item.label"
                        :value="item.label">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="支付类型" class="form-header">
                  <el-select v-model="form.payType" placeholder="请选择">
                      <el-option
                        v-for="item in options2"
                        :key="item.vlaue"
                        :label="item.label"
                        :value="item.vlaue">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="流水号" class="form-header">
                  <el-input v-model="form.serialNumber" placeholder="流水号"></el-input>
              </el-form-item>
              <el-form-item label="加款" class="form-header">
                  <el-input v-model="form.addFunds" placeholder="加款"></el-input>
              </el-form-item>
              <el-form-item label="退款" class="form-header">
                  <el-input v-model="form.refund" placeholder="退款"></el-input>
              </el-form-item>
             
              <el-form-item label="账户类型" class="form-header">
                <el-input v-model="form.payAccountType" placeholder="退款"></el-input>
            </el-form-item>
            <el-form-item label="支付方式" class="form-header">
              <el-input v-model="form.paymentMethod" placeholder="退款"></el-input>
          </el-form-item>
              
            </el-form>
            
      </div>
      <div class="queding">
        <div><el-button type="primary" v-if="!productId" @click="btnQue">确定</el-button></div>
        <div><el-button type="primary" v-if="productId" @click="btnQue2">确定</el-button></div>
        <div><el-button type="primary" plain @click="btnQuxiao">取消</el-button></div>
      </div>
  </div>
</template>
<script>
import { listAllUser } from "@/api/caiwu/zhgl";
import {add,edit} from '@/api/caiwu/jilu'
export default{
  name:'zhanghugai',
  data(){
      return{
          userList:[],
          productId:"",
          value:"",
          options2:[
              {
                  vlaue:'为我支付',
                  label:'为我支付'
              },
              {
                  vlaue:'由我支付',
                  label:'由我支付'
              },
            
          ],
          options3:[
              {
                  vlaue:'推广业务',
                  label:'推广业务'
              },
              {
                  vlaue:'营销目标',
                  label:'营销目标'
              },
          ],
        
          form:{
              userId:"",
              userName:"",
              payType:"",
              capitalFlow:"",
              serialNumber:"",
              addFunds:"",
              refund:"",
              payAccountType:"",
              paymentMethod:""
          },
          options:[
              {
                  vlaue:'用户实际资金流动',
                  label:'用户实际资金流动'
              },
              {
                  vlaue:'用户咨询费资金流动',
                  label:'用户咨询费资金流动'
              },
            
          ],
          formInline:{}
      }
  },
  props:{
      objDate2: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
      this.getList()
      if(this.objDate2){
          this.form=this.objDate2
          this.productId=this.objDate2.userId
      }
  },
  methods: {
      //选择
      getChange(e){
         
          for(let item of  this.userList){
              if(e == item.userId){
                  this.form.userName=item.userName
              }
          }
          console.log('选择', this.form.userName)
      },
       /** 查询用户列表 */
  getList() {
    listAllUser({}).then((res) => {
      res.data.forEach((item) => {
        this.userList.push({
          userName: item.userName,
          userId: item.userId,
        });
      });
    });
  },
      //修改
      btnQue2(){
          edit(this.form).then((res)=>{
              if(res.code ==200){
                  this.$message({
                  message: res.msg,
                  type: 'success'
                  });
                  this.btnQuxiao()
              }
          })
      },
      //确定
      btnQue(){
          add(this.form).then((res)=>{
              if(res.code ==200){
                  this.$message({
                  message: res.msg,
                  type: 'success'
                  });
                  this.btnQuxiao()
              }
          })
      },
    btnQuxiao(){
      this.$emit('quxiao')
    }
  },
}
</script>
<style scoped>
.queding{
padding-bottom: 28px;
text-align: center;
display: flex;
justify-content: space-around;
width: 34%;
margin: 0 auto;

}
.form-header{
  width: 430px;
  border: none;
}
.slect{
  width: 204px;
}
.content{
 width: 90%;
 margin: 0 auto;
 margin-top: 30px;
}
</style>